星尘

Vue 1【实例化、赋值】

发表于 更新于 分类于

下载Vue

1
2
开发版本  https://vuejs.org/js/vue.js
生产版本  https://vuejs.org/js/vue.min.js

引入Vue

1
<script src="./vue.js"></script>

实例化并进行赋值操作

1
2
3
4
5
6
7
8
9
10
<div id="app"> {{ content }} </div>
<script>
    <!--获取到vue对象，并且给id为app的dom进行赋值操作-->
    var app = new Vue({
        el:'#app',
        data:{
            content: "初始化"
        }
    })
</script>

修改值

1
2
3
4
5
<script>
	setTimeout(function () {
        app.$data.content = "切换文字"
    }, 2000)
</script>

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!--引入vue.js-->
    <script src="./vue.js"></script>

</head>
<body>
    <div id="app"> {{ content }} </div>
    <script>
        <!--获取到vue对象，并且给id为app的dom进行赋值操作-->
        var app = new Vue({
            el:'#app',
            data:{
                content: "初始化"
            }
        })

        //两秒后切换文字
        setTimeout(function () {
            app.$data.content = "切换文字"
        }, 2000)
    </script>

</body>
</html>